import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { InputIPModule } from './inputip.module';
import { LvSizeLD } from '../core/api';

@Component({
  template: `
    <lv-input-ip
      [(ngModel)]="ip"
      [lvType]="lvType"
      [lvSize]="lvSize"
      [lvDisabled]="lvDisabled"
      [lvIsShorthand]="lvIsShorthand"
      [lvShowPort]="lvShowPort"
    ></lv-input-ip>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class TestInputIPComponent {
  ip = '10.10.10.010:80';
  @Input() lvType: string = 'v4';
  @Input() lvSize: LvSizeLD = 'default';
  @Input() lvDisabled: boolean;
  @Input() lvIsShorthand: boolean;
  @Input() lvShowPort: boolean;
}

describe('InputIpComponent', () => {
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [TestInputIPComponent],
      imports: [InputIPModule, FormsModule],
    }).compileComponents();
  }));

  describe('render', () => {
    let component: TestInputIPComponent;
    let fixture: ComponentFixture<TestInputIPComponent>;
    const renderComponent = (param?) => {
      for (const [key, value] of Object.entries(param)) {
        component[key] = value;
      }
      fixture.detectChanges();
      expect(fixture).toMatchSnapshot();
    };

    beforeEach(() => {
      fixture = TestBed.createComponent(TestInputIPComponent);
      component = fixture.componentInstance;
    });

    // InputIP两种type渲染，v4和v6
    it('with lvType', () => {
      renderComponent({ lvType: 'v6', ip: '2001:3CA1:010F:001A:121B:0000:0000:0010' });
    });

    // InputIP不同尺寸渲染
    it('with lvSize', () => {
      renderComponent({ lvSize: 'large' });
    });

    // IP值简写渲染
    it('with lvIsShorthand', () => {
      renderComponent({ lvIsShorthand: true });
    });

    // 带端口渲染
    it('with lvShowPort', () => {
      renderComponent({ lvShowPort: true });
    });
  });

  describe('work', () => {
    let component: TestInputIPComponent;
    let fixture: ComponentFixture<TestInputIPComponent>;

    beforeEach(() => {
      fixture = TestBed.createComponent(TestInputIPComponent);
      component = fixture.componentInstance;
      fixture.autoDetectChanges();
    });

    // disabled状态下inputIP无法输入
    it('should not work when disabled', () => {
      component.lvDisabled = true;
      fixture.detectChanges();

      const input1 = fixture.nativeElement.querySelectorAll('input')[0];
      input1.value = '20';
      input1.dispatchEvent(new Event('input'));
      fixture.detectChanges();
      expect(input1.textContent).not.toBe('20');
    });

    // 输入超过255的数字自动修正为255
    it('when input greater than 255', () => {
      fixture.detectChanges();

      const input1 = fixture.nativeElement.querySelectorAll('input')[0];
      input1.value = '277';
      input1.dispatchEvent(new Event('input'));
      fixture.detectChanges();
      expect(input1.value).toBe('255');
    });
  });
});
